<template>
  <!-- 使用 Element 布局，将主界面分为头部，主体，底部三大部分，
             头部主要插入导航栏组件，底部为版权等信息，头部和底部位于主界面不变化。 -->
  <el-container class="App" style="background-color: #EBEEF5;">

    <el-header style="height:auto;padding:0px;">
      <nav-menu id="NavMenu"></nav-menu>
    </el-header>

    <el-main style="padding: 0px;min-height: 800px;">
      <!-- 渲染路由跳转页面内容 home -->
      <router-view v-if="$store.state.key" :key="key"></router-view>
      <!-- BackToTop 按钮 -->
      <el-button id="backToTop" type="primary" class="el-icon-caret-top" @click="backToTop()"></el-button>
      <!-- <a href="#NavMenu" id="backTop" class="el-icon-caret-top btn"></a> -->
    </el-main>

    <!-- <el-footer style="background-color:#4a4a4a;height: 50px;margin-top:100px;">
        <p style="color: dimgray;text-align:center;">Copyright © 2018-2019 ATU All Rights Reserved. 备案号：xxxxxxxxx</p>
      </el-footer> -->

  </el-container>
</template>

//<script>
  // 引入导航栏组件
  import NavMenu from "./components/Common/NavMenu.vue";
  // 导出 App 模块
  export default {
    watch: {
      $route(to, from) {
        if (from.name == 'login') {
          this.$store.commit('resetKey');
          this.$nextTick(function () {
            if (this.$store.state.isLogin) {
              this.getUserInfo(); //获取用户信息
            }
            this.$store.commit('resetKey');
            // this.key = new Date().toString();
          });
        }
      }
    },
    data() {
      return {
        key: 'default',
        url: { //Api
          userInfoApi: this.$Global.url.userInfo,
        }
      }
    },
    created() {
      // if (process.env.NODE_ENV === 'development') {
      this.url.userInfoApi = this.$Global.url.baseUrl + this.$Global.url.userInfo;
      // }
      this.$store.commit('getLocalStorage');
      if (this.$store.state.isLogin) {
        this.getUserInfo(); //获取用户信息
      }
      this.$router.push('/');
    },
    methods: {
      backToTop() {
        window.scrollTo({
          top: 0,
          behavior: "smooth"
        });
      },
      /**
       * 获取用户信息
       */
      getUserInfo() {
        this.$http.get(this.url.userInfoApi).then(response => {
            if (response.status == 200) {
              this.$store.commit('setUserInfo', response.data.data);
            } else {
              this.$message('获取用户信息失败');
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
    },
    // 其中引用的组件
    components: {
      NavMenu
    },
  };
</script>

<style>
  #backTop {
    background-color: darkgray;
    text-decoration: none;
    display: block;
    width: 40px;
    position: fixed;
    bottom: 30px;
    left: 30px;
  }

  #backToTop {
    position: fixed;
    bottom: 30px;
    left: 30px;
    outline: none;
  }

  .App {
    font-family: "Hiragino Sans GB"
  }
</style>